<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网格卡片</title>
  </head>
  <body>
    <h1 class="title">高亮流线型卡片边框</h1>
    <div id="app">
      <div class="card">
        <div class="inner">
          <svg
            t="1708877253757"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="932"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M896 160a32 32 0 1 0 64 0V128h32a32 32 0 1 0 0-64h-32V32a32 32 0 1 0-64 0v32h-32a32 32 0 1 0 0 64h32v32zM64 992a32 32 0 1 0 64 0v-32h32a32 32 0 1 0 0-64H128v-32a32 32 0 1 0-64 0v32H32a32 32 0 1 0 0 64h32v32z"
              p-id="933"
            ></path>
            <path
              d="M512 192C335.264 192 192 335.264 192 512s143.264 320 320 320 320-143.264 320-320c0-7.36-0.32-14.464-0.768-21.184l-3.008-46.912-42.56 20.032a169.6 169.6 0 0 1-225.6-225.6l20.032-42.56-46.912-3.008C526.464 192.32 519.36 192 512 192zM256 512a256.032 256.032 0 0 1 230.08-254.72L480 310.4a233.6 233.6 0 0 0 286.72 227.52A256.032 256.032 0 0 1 256 512z"
              p-id="934"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877267025"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1077"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M668.544 287.04a64 64 0 0 0-96.704 49.536l-19.168 230.048A128 128 0 1 0 608 673.44l27.616-331.552 115.904 69.568a32 32 0 0 0 32.96-54.912L668.544 287.04zM544 672a64 64 0 1 1-128 0 64 64 0 0 1 128 0zM928 192a32 32 0 0 1-32-32V128h-32a32 32 0 1 1 0-64h32V32a32 32 0 1 1 64 0v32h32a32 32 0 1 1 0 64h-32v32a32 32 0 0 1-32 32zM96 1024a32 32 0 0 1-32-32v-32H32a32 32 0 1 1 0-64h32v-32a32 32 0 1 1 64 0v32h32a32 32 0 1 1 0 64H128v32a32 32 0 0 1-32 32z"
              p-id="1078"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877276988"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1221"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M896 160a32 32 0 1 0 64 0V128h32a32 32 0 1 0 0-64h-32V32a32 32 0 1 0-64 0v32h-32a32 32 0 1 0 0 64h32v32zM64 992a32 32 0 1 0 64 0v-32h32a32 32 0 1 0 0-64H128v-32a32 32 0 1 0-64 0v32H32a32 32 0 1 0 0 64h32v32z"
              p-id="1222"
            ></path>
            <path
              d="M452.896 250.752c21.856-52.576 96.32-52.576 118.208 0l47.584 114.4 123.52 9.92c56.736 4.544 79.744 75.36 36.512 112.384l-94.08 80.64 28.736 120.544c13.216 55.36-47.04 99.136-95.616 69.44L512 693.504l-105.76 64.576c-48.576 29.696-108.8-14.08-95.616-69.44l28.768-120.544-94.112-80.64c-43.232-37.024-20.224-107.84 36.512-112.384l123.52-9.92 47.584-114.4z m106.688 139.008L512 275.328l-47.584 114.432a64 64 0 0 1-53.984 39.2l-123.52 9.92 94.08 80.608a64 64 0 0 1 20.64 63.456l-28.736 120.544 105.728-64.608a64 64 0 0 1 66.72 0l105.76 64.576-28.736-120.512a64 64 0 0 1 20.608-63.456l94.112-80.64-123.52-9.888a64 64 0 0 1-53.984-39.2z"
              p-id="1223"
            ></path>
            <path
              d="M237.184 255.168l104.288 88.64L277.952 224l-40.768 31.168zM524 864l-26.4-97.056L472.32 864h51.712zM630.112 343.776L693.632 224l40.768 31.168-104.288 88.64zM188.928 704.96l98.24-94.72L160 663.008l28.928 41.92zM736.832 610.24L864 663.008l-28.896 41.92-98.24-94.688z"
              p-id="1224"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877287587"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1367"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M480 360a24 24 0 1 1-48 0 24 24 0 0 1 48 0zM592 360a24 24 0 1 1-48 0 24 24 0 0 1 48 0z"
              p-id="1368"
            ></path>
            <path
              d="M731.456 240.48a32 32 0 0 0-54.912-32.96l-31.328 52.256C607.584 235.328 561.472 224 512 224c-46.336 0-89.728 9.92-125.984 31.296L344.96 204a32 32 0 0 0-49.984 40l42.08 52.576C304.992 334.72 288 386.176 288 448v288a64 64 0 0 0 64 64h32v32a32 32 0 1 0 64 0v-32h128v32a32 32 0 1 0 64 0v-32h32a64 64 0 0 0 64-64v-288c0-57.76-14.848-106.368-42.88-143.68l38.336-63.84z m-103.36 86.816c21.024 19.84 36.544 48.64 41.856 88.704h-315.936c5.344-40.032 20.864-68.896 41.92-88.704C422.56 302.272 461.92 288 512 288s89.472 14.272 116.064 39.296zM352 736v-256h320v256H352z"
              p-id="1369"
            ></path>
            <path
              d="M256 512a32 32 0 1 0-64 0v160a32 32 0 1 0 64 0v-160zM832 512a32 32 0 1 0-64 0v160a32 32 0 1 0 64 0v-160z"
              p-id="1370"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877310413"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1511"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M192 288a64 64 0 0 1 64-64h512a64 64 0 0 1 64 64v320a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V288z m576 0H256v320h512V288zM384 768a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64h-192a32 32 0 0 1-32-32z"
              p-id="1512"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877317418"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1655"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path d="M320 352h384v192H320v-192z" p-id="1656"></path>
            <path
              d="M896 160a32 32 0 1 0 64 0V128h32a32 32 0 1 0 0-64h-32V32a32 32 0 1 0-64 0v32h-32a32 32 0 1 0 0 64h32v32zM64 992a32 32 0 1 0 64 0v-32h32a32 32 0 1 0 0-64H128v-32a32 32 0 1 0-64 0v32H32a32 32 0 1 0 0 64h32v32zM192 288a64 64 0 0 1 64-64h512a64 64 0 0 1 64 64v320a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V288z m576 0H256v320h512V288zM384 768a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64h-192a32 32 0 0 1-32-32z"
              p-id="1657"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877328336"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1800"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M896 160a32 32 0 1 0 64 0V128h32a32 32 0 1 0 0-64h-32V32a32 32 0 1 0-64 0v32h-32a32 32 0 1 0 0 64h32v32zM64 992a32 32 0 1 0 64 0v-32h32a32 32 0 1 0 0-64H128v-32a32 32 0 1 0-64 0v32H32a32 32 0 1 0 0 64h32v32zM577.76 297.216a111.776 111.776 0 0 0-65.728-20.864 111.744 111.744 0 0 0-65.6 20.896 102.4 102.4 0 0 0-38.752 54.432 97.6 97.6 0 0 0 4.032 65.6 104.192 104.192 0 0 0 45.184 49.792l55.136 30.784 55.168-30.72a104.224 104.224 0 0 0 45.312-49.76 97.6 97.6 0 0 0 4.064-65.664 102.4 102.4 0 0 0-38.816-54.496z m-0.16 264.704L512 541.44l-65.536 20.48a202.4 202.4 0 0 0-84.576 51.424 187.936 187.936 0 0 0-47.808 83.84l-0.48 1.856-0.64 1.728a34.144 34.144 0 0 0 5.408 32.064c3.488 4.576 8.064 8.32 13.376 10.88 5.28 2.56 11.136 3.904 17.088 3.936h326.4c5.92 0 11.776-1.376 17.056-3.936 5.312-2.56 9.888-6.304 13.376-10.88a34.112 34.112 0 0 0 5.376-32.064l-0.64-1.76-0.448-1.824a188.416 188.416 0 0 0-47.84-83.84 202.88 202.88 0 0 0-84.544-51.424z m-164.288-306.016a168.8 168.8 0 0 1 197.472 0 154.688 154.688 0 0 1 58.176 82.176 147.488 147.488 0 0 1-6.176 98.848A157.44 157.44 0 0 1 594.784 512a258.432 258.432 0 0 1 107.808 65.664 240 240 0 0 1 60.896 106.976c4.48 13.216 5.664 27.264 3.36 40.96-2.304 13.76-8 26.752-16.576 38.016a91.84 91.84 0 0 1-32.96 26.72 96.96 96.96 0 0 1-42.08 9.664H348.8a96.96 96.96 0 0 1-42.112-9.664 91.84 91.84 0 0 1-32.928-26.72 85.888 85.888 0 0 1-16.576-37.984 83.968 83.968 0 0 1 3.36-40.992c10.4-40 31.36-76.832 60.896-107.04A257.984 257.984 0 0 1 429.312 512a157.408 157.408 0 0 1-68-75.072 147.456 147.456 0 0 1-6.176-98.848 154.688 154.688 0 0 1 58.176-82.176z"
              p-id="1801"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877335690"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1944"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M970.624 116.064l-29.184 55.52-29.248-55.52-53.312-30.272 53.312-30.336L941.44 0l29.184 55.456L1024 85.728l-53.376 30.336zM768 205.952l31.136-17.728 17.056-32.32 17.056 32.32 31.136 17.728-31.136 17.696L816.192 256l-17.056-32.32L768 205.92zM478.56 766.08c0 19.36 14.336 33.888 33.44 33.888s33.44-14.528 33.44-33.888V257.92C545.44 238.528 531.104 224 512 224s-33.44 14.528-33.44 33.888V766.08zM608 672c0 19.36 14.336 33.888 33.44 33.888S674.88 691.36 674.88 672v-314.624c0-19.36-14.336-33.888-33.44-33.888S608 338.016 608 357.44V672zM224 572.48c0 19.392 14.336 33.92 33.44 33.92s33.44-14.528 33.44-33.92v-125.824c0-19.36-14.336-33.888-33.44-33.888S224 427.296 224 446.656v125.856z m509.12 0c0 19.392 14.336 33.92 33.44 33.92S800 591.872 800 572.48v-125.824c0-19.36-14.336-33.888-33.44-33.888s-33.44 14.528-33.44 33.888v125.856zM382.56 705.92c-19.104 0-33.44-14.528-33.44-33.888v-314.624c0-19.36 14.336-33.888 33.44-33.888S416 338.016 416 357.44V672c0 19.36-14.336 33.888-33.44 33.888z"
              p-id="1945"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877343702"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2086"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M896 160a32 32 0 1 0 64 0V128h32a32 32 0 1 0 0-64h-32V32a32 32 0 1 0-64 0v32h-32a32 32 0 1 0 0 64h32v32zM64 992a32 32 0 1 0 64 0v-32h32a32 32 0 1 0 0-64H128v-32a32 32 0 1 0-64 0v32H32a32 32 0 1 0 0 64h32v32z"
              p-id="2087"
            ></path>
            <path
              d="M849.312 381.536L523.936 258.816a25.856 25.856 0 0 0-23.456 0L175.136 381.536a26.656 26.656 0 0 0-10.784 10.112 27.648 27.648 0 0 0 0.288 28.8 26.624 26.624 0 0 0 10.976 9.92l126.816 61.056v194.176a27.2 27.2 0 0 0 10.976 21.952C366.208 746.56 436.768 768 512.192 768c75.488 0 146.048-21.44 198.816-60.448a27.68 27.68 0 0 0 10.976-21.952v-194.208l126.848-61.056a26.624 26.624 0 0 0 10.976-9.856 27.648 27.648 0 0 0 0.32-28.8 26.656 26.656 0 0 0-10.816-10.144z m-180.128 289.632c-42.24 27.264-98.656 42.688-156.96 42.688-58.336 0-114.688-15.424-157.024-42.688v-154.304l145.792 70.208a25.536 25.536 0 0 0 22.432 0l145.76-70.208v154.304z m-156.96-138.56l-264.64-127.424 264.64-91.84 264.64 91.84-264.64 127.456z"
              p-id="2088"
            ></path>
            <path
              d="M212.8 495.68v152.416a27.712 27.712 0 0 1-7.744 19.168 26.4 26.4 0 0 1-18.688 7.904 25.856 25.856 0 0 1-18.656-7.936 27.168 27.168 0 0 1-7.712-19.2V495.68c0-7.2 2.784-14.08 7.744-19.168a26.08 26.08 0 0 1 18.688-7.936c6.976 0 13.696 2.88 18.656 7.968a27.456 27.456 0 0 1 7.712 19.168z"
              p-id="2089"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877351409"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2232"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M928 192a32 32 0 0 1-32-32V128h-32a32 32 0 1 1 0-64h32V32a32 32 0 1 1 64 0v32h32a32 32 0 1 1 0 64h-32v32a32 32 0 0 1-32 32zM96 1024a32 32 0 0 1-32-32v-32H32a32 32 0 1 1 0-64h32v-32a32 32 0 1 1 64 0v32h32a32 32 0 1 1 0 64H128v32a32 32 0 0 1-32 32z"
              p-id="2233"
            ></path>
            <path
              d="M719.168 226.336C759.872 215.04 800 246.208 800 289.152V669.76l-0.992-0.992c-7.36 55.68-54.24 98.688-111.008 98.688-61.856 0-112-51.04-112-113.952 0-62.944 50.144-113.952 112-113.952 17.184 0 33.44 3.936 48 10.944V289.152l-288 79.904v316.992C448 748.992 397.856 800 336 800S224 748.992 224 686.048c0-62.944 50.144-113.92 112-113.92 17.184 0 33.44 3.904 48 10.944v-214.016a64.96 64.96 0 0 1 47.168-62.816l288-79.904zM688 702.336c26.496 0 48-21.856 48-48.832s-21.504-48.864-48-48.864-48 21.888-48 48.864c0 26.976 21.504 48.832 48 48.832zM288 686.048c0 26.976 21.504 48.832 48 48.832s48-21.856 48-48.832-21.504-48.832-48-48.832-48 21.856-48 48.832z"
              p-id="2234"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877253757"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="932"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M896 160a32 32 0 1 0 64 0V128h32a32 32 0 1 0 0-64h-32V32a32 32 0 1 0-64 0v32h-32a32 32 0 1 0 0 64h32v32zM64 992a32 32 0 1 0 64 0v-32h32a32 32 0 1 0 0-64H128v-32a32 32 0 1 0-64 0v32H32a32 32 0 1 0 0 64h32v32z"
              p-id="933"
            ></path>
            <path
              d="M512 192C335.264 192 192 335.264 192 512s143.264 320 320 320 320-143.264 320-320c0-7.36-0.32-14.464-0.768-21.184l-3.008-46.912-42.56 20.032a169.6 169.6 0 0 1-225.6-225.6l20.032-42.56-46.912-3.008C526.464 192.32 519.36 192 512 192zM256 512a256.032 256.032 0 0 1 230.08-254.72L480 310.4a233.6 233.6 0 0 0 286.72 227.52A256.032 256.032 0 0 1 256 512z"
              p-id="934"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877267025"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1077"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M668.544 287.04a64 64 0 0 0-96.704 49.536l-19.168 230.048A128 128 0 1 0 608 673.44l27.616-331.552 115.904 69.568a32 32 0 0 0 32.96-54.912L668.544 287.04zM544 672a64 64 0 1 1-128 0 64 64 0 0 1 128 0zM928 192a32 32 0 0 1-32-32V128h-32a32 32 0 1 1 0-64h32V32a32 32 0 1 1 64 0v32h32a32 32 0 1 1 0 64h-32v32a32 32 0 0 1-32 32zM96 1024a32 32 0 0 1-32-32v-32H32a32 32 0 1 1 0-64h32v-32a32 32 0 1 1 64 0v32h32a32 32 0 1 1 0 64H128v32a32 32 0 0 1-32 32z"
              p-id="1078"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877276988"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1221"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M896 160a32 32 0 1 0 64 0V128h32a32 32 0 1 0 0-64h-32V32a32 32 0 1 0-64 0v32h-32a32 32 0 1 0 0 64h32v32zM64 992a32 32 0 1 0 64 0v-32h32a32 32 0 1 0 0-64H128v-32a32 32 0 1 0-64 0v32H32a32 32 0 1 0 0 64h32v32z"
              p-id="1222"
            ></path>
            <path
              d="M452.896 250.752c21.856-52.576 96.32-52.576 118.208 0l47.584 114.4 123.52 9.92c56.736 4.544 79.744 75.36 36.512 112.384l-94.08 80.64 28.736 120.544c13.216 55.36-47.04 99.136-95.616 69.44L512 693.504l-105.76 64.576c-48.576 29.696-108.8-14.08-95.616-69.44l28.768-120.544-94.112-80.64c-43.232-37.024-20.224-107.84 36.512-112.384l123.52-9.92 47.584-114.4z m106.688 139.008L512 275.328l-47.584 114.432a64 64 0 0 1-53.984 39.2l-123.52 9.92 94.08 80.608a64 64 0 0 1 20.64 63.456l-28.736 120.544 105.728-64.608a64 64 0 0 1 66.72 0l105.76 64.576-28.736-120.512a64 64 0 0 1 20.608-63.456l94.112-80.64-123.52-9.888a64 64 0 0 1-53.984-39.2z"
              p-id="1223"
            ></path>
            <path
              d="M237.184 255.168l104.288 88.64L277.952 224l-40.768 31.168zM524 864l-26.4-97.056L472.32 864h51.712zM630.112 343.776L693.632 224l40.768 31.168-104.288 88.64zM188.928 704.96l98.24-94.72L160 663.008l28.928 41.92zM736.832 610.24L864 663.008l-28.896 41.92-98.24-94.688z"
              p-id="1224"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877287587"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1367"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M480 360a24 24 0 1 1-48 0 24 24 0 0 1 48 0zM592 360a24 24 0 1 1-48 0 24 24 0 0 1 48 0z"
              p-id="1368"
            ></path>
            <path
              d="M731.456 240.48a32 32 0 0 0-54.912-32.96l-31.328 52.256C607.584 235.328 561.472 224 512 224c-46.336 0-89.728 9.92-125.984 31.296L344.96 204a32 32 0 0 0-49.984 40l42.08 52.576C304.992 334.72 288 386.176 288 448v288a64 64 0 0 0 64 64h32v32a32 32 0 1 0 64 0v-32h128v32a32 32 0 1 0 64 0v-32h32a64 64 0 0 0 64-64v-288c0-57.76-14.848-106.368-42.88-143.68l38.336-63.84z m-103.36 86.816c21.024 19.84 36.544 48.64 41.856 88.704h-315.936c5.344-40.032 20.864-68.896 41.92-88.704C422.56 302.272 461.92 288 512 288s89.472 14.272 116.064 39.296zM352 736v-256h320v256H352z"
              p-id="1369"
            ></path>
            <path
              d="M256 512a32 32 0 1 0-64 0v160a32 32 0 1 0 64 0v-160zM832 512a32 32 0 1 0-64 0v160a32 32 0 1 0 64 0v-160z"
              p-id="1370"
            ></path>
          </svg>
        </div>
      </div>
      <div class="card">
        <div class="inner">
          <svg
            t="1708877310413"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1511"
            width="128"
            height="128"
            fill="currentColor"
          >
            <path
              d="M192 288a64 64 0 0 1 64-64h512a64 64 0 0 1 64 64v320a64 64 0 0 1-64 64H256a64 64 0 0 1-64-64V288z m576 0H256v320h512V288zM384 768a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64h-192a32 32 0 0 1-32-32z"
              p-id="1512"
            ></path>
          </svg>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
